<div class="setting-container">
    <div class="table-row">
        <div class="setting-card-padding"></div>
        <div class="setting-card mdl-card mdl-shadow--2dp">
            <div class="mdl-card__title mdl-card--expand">
                <h2 class="mdl-card__title-text">SETTINGS</h2>
            </div>
            <div class="mdl-card__actions mdl-card--border">
                <div class="mdl-card__supporting-text">
                    Content Services host URL configuration
                </div>
                <nav class="mdl-navigation">
                    <i class="icon material-icons icon-margin">link</i>
                    <div class="mdl-textfield mdl-js-textfield adf-setting-input-padding">
                        <input data-automation-id="ecmHost" class="mdl-textfield__input" tabindex="1" type="text" tabindex="1" (change)="onChangeECMHost($event)"
                            pattern="^(http|https):\/\/.*" id="ecmHost" value="{{ecmHost}}">
                        <label class="mdl-textfield__label" for="ecmHost">ECM Host</label>
                        <span class="mdl-textfield__error">ECM host is not valid!</span>
                    </div>
                </nav>

                <div class="mdl-card__supporting-text">
                    Process Services host URL configuration
                </div>
                <nav class="mdl-navigation">
                    <i class="icon material-icons icon-margin">link</i>
                    <div class="mdl-textfield mdl-js-textfield adf-setting-input-padding">
                        <input class="mdl-textfield__input" type="text" (change)="onChangeBPMHost($event)" tabindex="2" pattern="^(http|https):\/\/.*"
                            id="bpmHost" value="{{bpmHost}}">
                        <label class="mdl-textfield__label" for="bpmHost">BPM Host</label>
                        <span class="mdl-textfield__error">BPM host is not valid!</span>
                    </div>
                </nav>
            </div>
            <div class="mdl-card__actions mdl-card--border">
                <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect" onclick="window.history.back()">
                    Back
                </a>
                <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect" onclick="window.location.href = '/'">
                    Apply
                </a>
            </div>
        </div>
        <div class="setting-card-padding"></div>
    </div>
</div>
